import { computed, isRef } from 'vue'
import type { Ref } from 'vue'

export function useContainerPanelStyle(panelJson: TPanel | Ref<TPanel>) {
  // 这里还不能使用unref 如果使用unref panelJson将不是响应式数据 所以用isRef判断
  // const pJson = unref(panelJson)
  const mobileContainerPanelStyle = computed(() => {
    const { width, height, background } = isRef(panelJson) ? panelJson.value.style : panelJson.style
    if((!background.color || background.color == '#fff') && !background.img) {
      return {
        width: width + '%',
        height: height + '%',
        background: isRef(panelJson) ? '-webkit-linear-gradient(top, transparent 19px, #eef0f1 20px), -webkit-linear-gradient(left, transparent 19px, #eef0f1 20px)' : '#fff',
        backgroundSize: '20px 20px'
      }
    }
    return {
      width: width + '%',
      height: height + '%',
      backgroundColor: background.color,
      backgroundImage: `url(${background.img})`,
      backgroundSize: background.size,
      backgroundRepeat: background.repeat,
      backgroundPosition: background.position
    }
  })

  return { mobileContainerPanelStyle }
}